import React, { useMemo } from "react";
import { Select } from "antd";
import { LibAppView } from "@/lib";

interface IJSCityProps {
    value?: string;
    onChange?: (value: string[]) => void;
}

const JSCity = LibAppView.withService<IJSCityProps>({
    reqEndPoints: [{
        endPoint: "setting.jsCityList",
        name: "cityList"
    }],
    loadingOptions: {
        "skeletonProps": {
            "paragraph": {
                "rows": 1
            }
        }
    }
})((props) => {
    const regionData = useMemo(() => {
        const listData: any[] = (props.responseData as any)?.cityList?.data || [];
        return {
            cityList: listData.map((item: any) => ({
                label: item.title,
                value: item.code
            })),
            provinceCode: listData[0]?.code
        }
    }, [props.responseData]);
    const onChange = (value: string) => {
        typeof props.onChange === "function" && props.onChange([regionData.provinceCode, value]);
    };
     
    return <Select defaultValue={props.value} onChange={onChange} options={regionData.cityList} />;
});

export default JSCity;
